<template>
  <div>
      <!-- 全屏播放器 -->
       <div class="player"  v-show="showPlayer">
          <div class="bg" :style="'background-image: url('+songda.al.picUrl+')'"></div>
          <div class="shade"></div>
          <div class="view">
              <div class="button" @click.stop="soucahuu">
                <!-- showPlayer=false -->
                  <span class="iconfont icon-zuoyou"></span>
              </div>
              <div class="title">
                  <h2>{{songda.name}}</h2>
                  <h3>
                    <span v-for="(item,index) in songda.ar" :key="index">{{item.name}}</span>
                  </h3>
              </div>
              <div class="content">
                <!-- @click="togglelyric = false" -->
                <div  v-show="togglelyric"  :class="['img','play',{'pause':iconplay}]">
                  <img :src="songda.al.picUrl" alt="">
                </div>
                <div class="lyrics" v-show ="!togglelyric">
                  <!--  @click="togglelyric = true" -->
                      <ul :style="{'top':lyricTop}">
                        <li  v-for="(item,index) in lyric" :key="index" :class="{'con':currentRow == index}">
                          {{item.text}}
                        </li>
                      </ul>
                </div>
              </div>
              <div class="range">
                  <div class="bar">
                      <span class="timeLeft">
                        {{timeLeft | playerTime}}
                      </span>
                      <van-slider @change="sliderchange" v-model="value" inactive-color="#514E4C" bar-height="4px" active-color="#ee0a24">
                            <template #button>
                                <div class="custom-button"></div>
                            </template>
                      </van-slider>
                       <span class="timeRight">
                          {{timeRight | playerTime}}
                       </span>
                  </div>
              </div>
              <div class="pinglun">
                  <h3>
                     <!-- <span class="iconfont icon-xiazai"></span> -->
                     <!-- <span class="iconfont icon-shizhong"></span> -->
                     <span @click.stop="pingity">
                     <!-- <router-link tag="span" to="/pinglun"> -->
                        <!-- <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-pinglunqu"></use>
                        </svg> -->
                      <span class="iconfont icon-pinglun1"></span>
                     <!-- </router-link> -->
                     </span>
                     <!-- <span class="iconfont icon-pinglunqu"></span> -->
                     <!-- <span>
                         <span class="iconfont icon-icon" v-if=" dian== 1" @click="dianzhigequ"></span>
                          <span class="iconfont icon-icon tea"  v-else  @click="dianzhigequ"></span>
                     </span> -->
                  </h3>
              </div>
              <div class="buttons">
                <!-- <div v-if="playerType == 1" @click="changeType" class="iconfont icon-liebiaobofang1"></div> -->
                <div v-if="playerType == 1" class="iconfont icon-xunhuanbofang-wangyiicon"  @click="changeType"></div>
                <div v-else   @click="changeType" class="iconfont icon-liebiaobofang"></div>
                <div class="iconfont icon-shangyiqu"  @click='startup'></div>
                <div :class="['iconfont',iconplay? 'icon-xiaofangkuai':'icon-zanting']" @click.stop="togplay"></div>
                <div class="iconfont icon-xiangyiqu" @click='lowerFun'></div>
                <div class="iconfont icon-shoucang" v-if="soucang == 1" @click="dfgasd"></div>
                <div class="iconfont icon-shoucang iconta"  v-else  @click="dfgasd " ></div>
                <!-- <div class="iconfont icon-24gf-playlistHeart" @click="getjiluxiao"></div> -->
              </div>
          </div>
       </div>

      <!-- 播放器 -->
      <div class="mini-player" @click="showPlayer=true" v-if="songda" v-show="!showPlayer">
        <div :class="['img','play',{'pause':iconplay}]">
          <!-- <van-image
          lazy-load
          :src="songda.al.picUrl"
          /> -->
           <img :src="songda.al.picUrl" alt="">
        </div>
        <div class="text">
          <h2>{{songda.name}}</h2>
          <h3 >
            <span v-for="(item,index) in songda.ar" :key="index" v-show="index<1">{{item.name}}&nbsp;</span>
          </h3>
        </div>
        <div class="control" @click.stop="togplay">
          <span class="iconfont icon-24gf-play" v-show="iconplay" ></span>
          <span class="iconfont icon-zanting" v-show="!iconplay" ></span>
        </div>
        <div class="dou">
          <span class="iconfont icon-24gf-playlistHeart" @click.stop="getjiluxiao"></span>
        </div>
      </div>
      <audio 
       ref="audio" 
       hidden
       controls 
       :src="musicData" 
       @loadeddata="loadeddataFun" 
       @ended="endedFun"

       ></audio>
    
    
  </div>
</template>

<script>
import {getSongUrl,getSongdata,getLyric,getyonhuhtis,getsubscribeto,getweeksuer,getzhiyunadian,getnamesonger} from "../../api/base"
import {getPlaylist} from "../../api/rank";
import { Toast } from 'vant';
// import pinglun from './pinglun.vue'
export default {
    props:["playerId","listId","nieuid"],
    data(){
      return{
        musicData:null,
        songda:{
          ar:null,
          al:{
            picUrl:null
          },
        },
        // iconplay:true,
        iconplay:true,//播放按钮
        showPlayer:false, //全屏播放器状态
        timeRight:0,
        value:0,//
        timeLeft:0,//左时间
        clearset:null,//定时器
        playerLists:[],//播放列表
        togglelyric:true,//歌词切换
        lyric:[],//歌词数组
        lyricTop:'200px',//歌词位置
        currentRow:0,//歌词高亮
        playerType:1,//播放類型 1.列表播放 2.随机播放
        soucang:1,//收藏状态
        dian:1,//歌曲点赞状态
        huaqu1:null
      }
    },
    methods:{
      //歌曲点赞
      dianzhigequ(){
          this.dian = this.dian == 1 ? 2 : 1 ;
          console.log(this.playerId)
          if(this.dian==1){
             getzhiyunadian({
               type:0,
                t:0,
                id:this.playerId
              }).then(data=>{
                this.huaqu1=data
              })
          }else{
           getzhiyunadian({
            type:0,
              t:1,
              id:this.playerId
            }).then(data=>{
              this.huaqu1=data
            })
          }
      },
      //评论
       pingity(){
          this.showPlayer=false;
          // this.playerId=""
          this.$router.push({ name:"pinglun", params:{obj:this.playerId}})
          this.showPlayer=true
       },
        // 获取歌曲url
        getSongU(){
          
          //  console.log(this.playerId)
           getSongUrl({id:this.playerId}).then(data=>{
            //  console.log(data);
             this.musicData = data.data[0].url;
              this.iconplay = true
           })
        },
        // 获取歌曲信息
        getSongD(){
            getSongdata({ids:this.playerId}).then(data=>{
                  // console.log(data.songs);
                  this.songda=data.songs[0];
            })
        },
        //用户播放历史
         getnieuid(){

            getnamesonger({
              uid:this.nieuid
            }).then(data=>{
              console.log("用户信息",data)
            })
            // console.log("nieuid",this.nieuid)
             //用户播放历史
             console.log(this.nieuid)
              getyonhuhtis({
                uid:this.nieuid
              }).then(data=>{
                console.log("用户播放历史",data)
              })
        
         },
       
        //音乐加载完成后获取音乐数据
        loadeddataFun(){
            this.togplay();//自动播放
            let duration =this.$refs.audio.duration;
            this.timeRight = duration;
            // console.log(this.timeRight)
        },
     
        //播放暂停
        togplay(){
             if(this.iconplay){
                this.$refs.audio.play();//播放音乐

                clearInterval(this.clearset); //清除定时器
                this.clearset = setInterval(()=>{
                    let currentTime = this.$refs.audio.currentTime; //实时变化时间
                    let duration = this.$refs.audio.duration; //总时间
                    this.timeLeft = currentTime;
                    
                    // 计算滚动条值
                    this.value = (currentTime / duration) *100;
                    if(this.value == 100){
                        clearInterval(this.clearset);
                        this.$refs.audio.pause();//暂停音乐
                        this.iconplay = true;
                    }
                },999)


            }else{
                this.$refs.audio.pause();//暂停音乐
                clearInterval(this.clearset);
            }
            
            this.iconplay = !this.iconplay;//切换页面
        },
        //获取滚动条的变化
        sliderchange(){
          var duration = (this.$refs.audio.duration*this.value) / 100 ;
          this.timeLeft = duration;
         
          this.$refs.audio.currentTime = duration;
        },
        //下一曲
        lowerFun(){
          let id = this.songda.id;
          let index = this.playerLists.findIndex(item=>item.id==id);
          index = index+1 >this.playerLists.length-1 ? 0 :index + 1;
          this.$emit("set-player-id",this.playerLists[index].id);
        },
         //上一曲
        startup(){
          let id = this.songda.id;
          //获取播放歌曲的列表下标
          let index = this.playerLists.findIndex(item=>item.id==id);
          index = index -1 >this.playerLists.length-1 ? 0 :index - 1;
          this.$emit("set-player-id",this.playerLists[index].id);//返回父组件修改父组件id
        },
         // 获取歌曲歌词
        getLyricFun(){
            getLyric({id:this.playerId}).then(data=>{
               
                this.formatLyric(data.lrc.lyric)
                //  console.log(data.lrc.lyric);
            })
        },
        //处李歌词结构
        formatLyric(text){
          
          this.lyric=[];
          let arr = text.split("\n");
          let row = arr.length;
          for(let i = 0 ; i < row ;i++){
            let temp_row = arr[i];
            let temp_arr = temp_row.split("]");
            let lyrictext = temp_arr.pop();
           
            temp_arr.forEach(ele=>{
              let obj={};
              let time_arr = ele.substr(1,ele.length - 1).split(":");
              let s = time_arr[0]*60 + Math.ceil(time_arr[1]);
              // console.log(s)
              
              obj.text = lyrictext;
              obj.time = s;
              if(lyrictext.length >0){
                this.lyric.push(obj)
                // console.log(this.lyric)
              }
            })
          }
          // console.log(this.lyric);
        },
        //音乐播放结束后
        endedFun(){
          console.log("音乐播放结束");
          this.iconplay = true;

          if(this.playerType == 1){
            this.lowerFun();
          }else{
            let index = parseInt( Math.random() * this.playerLists.length);
            this.$emit("set-player-id",this.playerLists[index].id);
          }


        },
        //列表播放
        changeType(){
            this.playerType = this.playerType == 1 ? 2 : 1 ;
            if(this.playerType == 1){
                Toast("列表播放");
            }else{
                Toast("随机播放");
            }
        },
        //收藏
        dfgasd(){
            this.soucang = this.soucang == 1 ? 2 : 1 ;
            if(this.soucang == 1){
                  Toast("取消收藏");
            }else{
              
                 Toast("已收藏");
            }
        },
        //收藏请求
        soucahuu(){
                //t : 类型,1:收藏,2:取消收藏 id : 歌单 id
              this.showPlayer=false;
              // this.$router.go(0)
              if(this.soucang != 1){
                getsubscribeto({
                    t:1,
                    id:this.playerId
                }).then(data=>{
                    console.log(data)
                  console.log("收藏")
                })
              }else{
                  getsubscribeto({
                    t:2,
                    id:this.playerId
                 }).then(data=>{
                    console.log(data)
                    console.log("取消收藏")
                 })
              }
        },
        //播放记录
        getjiluxiao(){
          console.log(this.nieuid)
              getweeksuer({
                type:1,
                id:this.nieuid
              }).then(data=>{
                // consoe.log()
                console.log("播放记录",data)
              })
        }
        
    },
    
    watch:{
      playerId(){
        this.getSongU();
        this.getSongD();
        this.getLyricFun();
      },
      listId(){
          // console.log("歌单数据");
          getPlaylist({id:this.listId}).then(data=>{
            this.playerLists = data.playlist.tracks;
            // console.log(this.playerId);        
          })
      },
     
      //左侧时间变化
      timeLeft(){
        for(let i = 0 ; i <= this.lyric.length ; i++) {
           if( parseInt( this.timeLeft ) <= this.lyric[i].time){
              this.lyricTop = 200 - i * 36 + "px";
              this.currentRow = i ;
                break;
            }
           
        }
      }
    },
    filters:{
       playerTime(data){
         let m = parseInt(data / 60);
         let s = parseInt(data % 60);
         if(m == 0 && s == 0){
           return "0:00"
         }else{
           return m + ":" +(s < 10 ? "0" +s:s);
         }
       }
    },
    created(){
      console.log(this.nieuid)
    }
    // components:{
    //    pinglun
    // }
}
</script>

<style lang="less">
//全频播放器
.player{
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: rgb(63, 63, 63);
    //
    z-index:1003;
    .bg{
      position: absolute;
      top:0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-size:100%;
      background-repeat: no-repeat;
      background-position:50px;
      transform: scale(1.8);
      transform-origin:center center;
      filter: blur(30px);
      opacity: 1;
      z-index: 2;

    }
    .shade{
      position:absolute;
      z-index: 3;
      left:0px;
      bottom: 0px;
      height: 50%;
      width: 100%;
      background-image: linear-gradient(180deg,rgba(0,0,0,0),#000);
    }
    .view{
       position:absolute;
       z-index: 4;
       left: 0px;
       bottom: 0px;
       height: 100%;
       width: 100%;
       background: rgba(0, 0, 0,.2);
       .pinglun{
         width: 100%;
         height: 30px;
         color:#fff;
         position:absolute;
         bottom: 135px;
         font-size: 16px;
         padding-left: 10px;
         padding-right: 10px;
         box-sizing: border-box;
         h3{
           display: flex;
           justify-content: space-around;
           span{
             display: block;
             width: 15%;
             height: 30px;
             font-size: 22px;
             line-height: 30px;
             text-align: center;
           }
         }
       }
       .button{
         font-size: 22px;
         position: absolute;
         left:13px;
         top: 13px;
         font-weight: bold;
         span{
           &.iconfont{
             color: #fff;

           }
          
         }

       }
       .title{
          text-align: center;
           color: #fff;
            h2{
              font-size: 20px;

            }
            h3{
              font-size: 14px;
            }
        }
        .content{
          text-align: center;
          height: 65%;
          width: 100%;
          position: relative;
          overflow: hidden;
          .img{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
        
            border-radius:50%;
            background: rgba(0, 0, 0,0.3);
            
             img{
                  margin: 0 auto;
                  width: 274px;
                  height: 274px;
                  border-radius: 50%;
                  padding-top: 13px;
             }
               &.play{
                    animation: rotate 20s linear infinite;
               }
                &.pause{
                    animation-play-state: paused;
                }
             .lyrics{
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
                 overflow-y: scroll;
                ul{
                    position: absolute;
                    width: 100%;
                    top:180px;
                    left:0px;
                    color:#c4c4c4;
                    li{
                        height: 36px;
                        line-height: 36px;
                        // color:#7d7e7e;
                        font-size: 16px;
                        overflow: hidden;
                        &.con{
                            color:#fff;
                        }
                    }
                 }
            }
          }
         
        }
       
    }
     .range{
          position: absolute;
          width:100%;
          left:0px;
          bottom:110px;
          text-align:center;
         .bar{
            width:66%;
            margin:auto;
            position:relative;
            font-size:14px;
            .timeLeft{
              // display: block;
              position:absolute;
              left:-38px;
              top:-6px;
              color: #fff;

            }
            .timeRight{
              // display: block;
              position:absolute;
              right:-38px;
              top:-6px;
              color: #fff;

            }
            
          }
        }

      .buttons{
         display: flex;
         position: absolute;
         bottom: 40px;
         width: 100%;
         .iconfont{
           flex: 1;
           width: 20%;
           text-align: center;
           font-size: 24px;
           line-height: 38px;
           color: #fff;
           
            &.iconta{
             color: red;
           }

         }
         
         .icon-icon-xiaofangkuai{
           color: #fff;
         }
      }
     .icon-xunhuanbofang-wangyiicon{
         font-size:28px
     }

   
}
.custom-button{
  width: 6px;
  height: 6px;
  background-color: #D0261A;
  border: 5px solid #fff;
  border-radius: 50%;
}




//播放器
.mini-player{
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: rgba(255, 255, 255, .9);
    display: flex;
    padding-bottom: 55px;
    z-index: 6;
    .img{
      height: 37px;
      width: 37px;
      margin: 7px 9px 17px;
      background-color: aqua;
      border-radius: 50%;
      img{
        height: 37px;
        width: 37px;
        border-radius: 50%;
      }
      &.play{
        animation: rotate 20s linear infinite;
      }
      &.pause{ 
        animation-play-state: paused;
      }
    }
    .text{
      // flex:1;
      width: 60%;
      h2{
         font-size:14px;
         line-height:16px;
         color:#131314;
         margin-top:12px;
         font-weight: 400;

       }
       h3{
         line-height:12px;
         font-size:10px;
         color:#929393;
       }
    }
    .control{
       text-align:center;
       width:26px;
       height: 26px;
       border-radius: 50%;
       border: 2px solid #464848;
       margin:11px 14px 0 0 ;
       line-height: 24px;
       .iconfont{
         color:#464848;
         font-size:12px;
       }
    }
    .dou{
       text-align:center;
       width:37px;
       font-size: 12px;
       line-height: 50px;
       height:100%;
       span{
         font-size: 26px;
       }
    }
    .df{
      display: none;
    }
}
.tea{
  color: red;
}

@keyframes rotate {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

.icon {
  width: 1em;
  height: 1em;
  // color:white;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>